<template>
  <!--
  管理员页面布局
  -->
  <el-container  class="container">
    <!--侧边栏-->
    <div class="aside">
      <el-aside width="200px">
        <SideNavigation></SideNavigation>
      </el-aside>
    </div>

    <el-container >
      <!--顶部导航-->
      <el-header>
        <strong>吃了么平台</strong>
        <div class="header-menu">
          <el-dropdown>
            <span class="el-dropdown-link">
                <img src="@/assets/img/header/img.png">
              </span>
            <el-dropdown-menu slot="dropdown" >
              <el-dropdown-item @click.native="logout">注销</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <!--路由跳转区域-->
      <el-main style="padding: 0; overflow: hidden; height: 94vh; background-color: #EBEEF5; color: #333;">
        <div>
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

import {
  getAdministratorInformation,
  removeAdministratorInformation,
} from "@/api/administrator";

import {setAdministratorToken} from "@/utils/cookie";
import SideNavigation from "@/views/administration/layout/SideNavigation";

export default {
  name: "AdministratorHome",
  components: {SideNavigation},
  data(){
    return {
      administrator: getAdministratorInformation()
    }
  },
  methods: {
    /**
     * 退出登录(跳回至登录界面，并清空token信息）
     */
    logout() {
      setAdministratorToken(false);
      removeAdministratorInformation();

      this.$router.push({
        path: "/login"
      })
    },
  }
}
</script>

<style lang="less">
.el-container {
  padding: 0;
  margin: 0;
  height: 100vh;
}
.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;

  /**
  1vh：占屏幕1%的位置
   */
  height: 6vh;
  line-height: 6vh;
}

.el-aside {
  background-color: #304156;
  height: 100vh;
}

.header-menu{
  float: right;
  width: 150px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.el-dropdown-link{
  cursor: pointer;
}

.el-dropdown{
  color: #333;
}

.el-aside {
  height: 100vh;
}

.el-dropdown-link{
  cursor: pointer;
}

.el-link{
  color:#333;
}

a {
  text-decoration: none;
}
</style>